{extend name="layout/layout"}
{block name="content"}
<main class="user_page  ">
    <section class="">
        <div class="layui-main">
            <div class="user_con">
                <div class="user_headpage" data-load="user_active_header">
                    {include file="user_activity/page_menu" menu='guest' id="$id" /}
                </div>
                <div class="right_main ">
                    <p class="ft24 mb10 ft-bold">嘉宾</p>
                    <p class="ft14 gary_c9 mb20 ft-bold">快來介紹你的嘉賓有多厲害！</p>
                    <div class="block_com" style="min-height: 80vh;">
                        <p class="gary_c9 mb30">拖曳嘉賓可以改變排序</p>
                        <div class="active_w1 active3 " style="margin:  0 auto;">
                            <ul class="layui-row layui-col-space60 ul_height a8_ul1" id="advanced-1">
                                {foreach $vo as $key => $guest}
                                <li class="layui-col-md3 layui-col-xs4"  data-id="{$guest.id}" style="cursor: pointer">
                                    <div class="item">
                                        <div class=" img img_box guest-item">
                                            <img class="layui-circle" style="width: 150px;height: 150px;"
                                                 src="{$guest.profile|default='__ROOT__/public/activity/images/userp.png'}">
                                        </div>
                                        <p>{$guest.username|default=''}</p>
                                    </div>
                                </li>
                                {/foreach}
                                <li class="layui-col-md3 layui-col-xs4">
                                    <div class="item" data-btn="add">
                                        <div class=" img img_box">
                                            <img class="layui-circle" src="__ROOT__/public/activity/images/add.jpg">
                                        </div>
                                        <p>新增嘉賓</p>
                                    </div>
                                </li>
                            </ul>
                            <div class="mt40 d-flex jc-s al-c">
                                <button class="layui-btn layui-btn-lg w100 layui-bg-orange next-btn" onclick="save()">储存</button>
                             </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<div class="layui-hide"> 
    <div class="addhtml ">
        <div class="active_w active8 ">
            <form class="layui-form" lay-filter="add-form">
                <div class=" flex-center mb60">
                    <div class="user_upload">
                        <div class="user_img">
                            <img src="__ROOT__/public/activity/images/userp.png" id="upload-img">
                        </div>
                        <div id="upload-btn" class="btn">
                            <img class="layui-circle" src="__ROOT__/public/activity/images/upload.png">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="label must">嘉賓姓名</div>
                    <div class="">
                        <input type="text" name="username" lay-verify="required" placeholder="请填写嘉賓姓名"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="label must">職稱
                    </div>
                    <div class="">
                        <input type="text" name="posit" lay-verify="required" placeholder="请填写嘉賓職稱"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="label must">公司名稱
                    </div>
                    <div class="">
                        <input type="text" name="company_name" lay-verify="required" placeholder="请填写嘉賓公司名稱"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="label ">嘉賓簡介
                    </div>
                    <div class="">
							<textarea name="user_desc" lay-verify="required" class="layui-textarea"
                                      style="min-height: 3rem;" placeholder="请填写嘉賓嘉簡介"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="label ">嘉賓網址<p class=" tip1">可以加上嘉賓的 Facebook、Instagram、Twitter 等</p>
                    </div>
                    <div class="">
                        <input type="text" name="guest_website" lay-verify="" placeholder="请填写嘉賓網址" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="mt40 d-flex jc-c al-c">
                    <button class="layui-btn layui-bg-orange next-btn">新增嘉宾</button>
                </div>
               
            </form>
        </div>
        <div class="flex-column-center">

        </div>

    </div>
</div>
<script src="js/Sortable.js"></script>
<script src="st/app.js"></script>
<script type="text/javascript" src="__ROOT__/public/activity/js/Sortable.js?at={:date('his')}"></script>
<script type="text/javascript" src="__ROOT__/public/activity/st/app.js?at={:date('his')}"></script>
<style>
    .layui-dropdown-content {
        position: absolute;
        z-index: 99999999;
        background-color: #fff;
        box-sizing: border-box;
        border: 1px solid #e4e7ed;
        border-radius: var(--dropdown-content-border-radius);
        box-shadow: 0 2px 12px #0000001a;
    }
</style>
<script>
        var addhtml = $('.addhtml')[0].outerHTML;
    $(document).on('click', '[data-btn="add"]', function () {

        layui.use(function () {
            var upload = layui.upload;
            var layer = layui.layer;
            var element = layui.element;
            var $ = layui.$;

            layer.open({
                type: 1, // page 层类型
                area: ['900px', '80%'],
                title: false,
                shade: 0.6, // 遮罩透明度
                shadeClose: true, // 点击遮罩区域，关闭弹层
                anim: 0, // 0-6 的动画形式，-1 不开启
                content: addhtml,
                success(elem) {
                    var profile = '';
                    //文件上传
                    upload.render({
                        elem: elem.find('#upload-btn'),
                        url: '/api/upload', // 实际使用时改成您自己的上传接口即可。
                        before: function (obj) {
                            // 预读本地文件示例，不支持ie8
                            obj.preview(function (index, file, result) {
                                elem.find('#upload-img').attr('src', result); // 图片链接（base64）
                            });
                        },
                        done(res) {
                            if (res.code === 1) {
                                profile = res.data.url;
                            } else {
                                layui.layer.msg(res.msg, {icon: 2})
                            }

                        }

                    })
                    //表单提交
                    var addForm = elem.find('.layui-form');
                    addForm.on('submit', function () {
                        var data = layui.form.val('add-form');
                        data.profile = profile;
                        $.quickPost('/activity/user/activity/{$act.id}/guest', data).done((res) => {
                            location.reload();
                        })
                        return false;
                    })

                }
            });

            element.init();
        })

    })
    function save() {
        var guestIds = [];
        // 获取所有具有 data-id 属性的 li 元素
        var guestItems = document.querySelectorAll('.a8_ul1 li[data-id]');
        // 遍历每个 li 元素，按顺序将其 data-id 属性值添加到数组中
        guestItems.forEach(function(guestItem) {
            guestIds.push(guestItem.getAttribute('data-id'));
        });
        // guestIds 数组现在按照 HTML 中的先后顺序包含所有嘉宾的 ID
        // console.log(guestIds);
        $.quickPost('/activity/user/activity/{$act.id}/guest?type=sort', {ids:guestIds}).done((res) => {
            location.reload();
        })
        // 在这里进行进一步处理或将其发送到后端
    }
</script>
{/block}
